import React from "react";

import { CSSTransition } from 'react-transition-group';

import { useAppDispatch } from "@hooks/redux";
import { editAdmissions } from "@store/reducers/actionCreators";

import Modal from "../Modal";
import ChangeForms from "../ChangeForms";

import type { IChangeModalProps } from "../../interfaces/propTypes/IChangeModalProps";

const ChangeModal = ({
  show,
  title,
  changeForms,
  setChangeForms,
  isChangeOpened,
  setIsChangeOpened,
}: IChangeModalProps): JSX.Element => {
  const dispatch = useAppDispatch();
  const editAdmission = (): void => {
    dispatch(editAdmissions({ data: changeForms }));
  };
  return (
    <CSSTransition
      in={show}
      timeout={300}
      classNames="fade"
      unmountOnExit
    >
      <Modal
        isOpened={isChangeOpened}
        setIsOpened={setIsChangeOpened}
        title={title}
        buttonSettings={["Сохранить", editAdmission]}
      >
        <ChangeForms changeForms={changeForms} setChangeForms={setChangeForms} />
      </Modal>
    </CSSTransition>
  );
};

export default ChangeModal;